<template>
  <div class="titlebox"></div>
  <div class="supresulttitle"></div>
  <div class="noisebox">
    <div class="leftbox">
      <div class="heng">
        <img src="../../../assets/fengjie/icon5.png" alt="" />
      </div>
      <div class="heng">
        <span class="span1 setColor">21341</span>
      </div>
      <div class="heng">
        <span class="span2">线索总数</span>
      </div>
    </div>
    <div class="rightbox">
      <div class="left">
        <div class="box">
          <img src="../../../assets/icon6.png" alt="" />
          <e-charts id="echarts" ref="chart" :option="dataOption"></e-charts>
        </div>
      </div>
      <div class="right">
        <div class="item">
          <div class="i-left">
            <div class="ik1"></div>
            <span>其他系统转接</span>
          </div>
          <div class="i-right setColor">1232</div>
        </div>
        <div class="item">
          <div class="i-left">
            <div class="ik2"></div>
            <span>物联网感知</span>
          </div>
          <div class="i-right setColor">4212</div>
        </div>
        <div class="item">
          <div class="i-left">
            <div class="ik3"></div>
            <span>巡逻发现</span>
          </div>
          <div class="i-right setColor">5232</div>
        </div>
        <div class="item">
          <div class="i-left">
            <div class="ik4"></div>
            <span>群众投诉 </span>
          </div>
          <div class="i-right setColor">121</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

// 配置项
let dataOption = ref({});
// 初始化echarts
function initEcharts() {
  dataOption.value = {
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        padAngle: 5,
        itemStyle: {
          borderRadius: 1,
        },
        label: {
          show: false,
          position: "center",
        },
        data: [
          {
            value: 4212,
            name: "Email",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: "rgba(13, 196, 242, 0.1)" },
                { offset: 1, color: "rgba(13, 196, 242, 1)" },
              ]),
            },
          },
          {
            value: 1232,
            name: "Union Ads",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: "rgba(17, 116, 229, 0.1)" },
                { offset: 1, color: "rgba(17, 116, 229, 1)" },
              ]),
            },
          },
          {
            value: 5232,
            name: "Search Engine",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: "rgba(211, 115, 72, 0.1)" },
                { offset: 1, color: "rgba(211, 115, 72, 1)" },
              ]),
            },
          },

          {
            value: 500,
            name: "Direct",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: "rgba(189, 204, 223, 0.1)" },
                { offset: 1, color: "rgba(189, 204, 223, 1)" },
              ]),
            },
          },
        ],
      },
    ],
  };
}
onMounted(() => {
  initEcharts();
});
</script>

<style lang="less" scoped>
.titlebox {
  width: 100%;
  height: 44px;
  background-image: url("../../../assets/fengjie/icon2.png");
  background-size: 100% 100%;
}

.supresulttitle {
  width: 100%;
  height: 36px;
  margin-top: 9px;
  background-image: url("../../../assets/fengjie/icon3.png");
  background-size: 100% 100%;
}

.noisebox {
  width: 100%;
  margin-top: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .leftbox {
    width: 120px;
    height: 146px;
    background-image: url("../../../assets/fengjie/icon4.png");
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 10px 0 0 0;
    .heng {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 48px;
        height: 48px;
      }
      .span1 {
        font-family: AlimamaShuHeiTi-Bold;
        font-weight: 500;
        font-size: 28px;
      }
      .span2 {
        font-family: SourceHanSansCN-Regular;
        font-weight: 400;
        font-size: 14.16px;
        color: #ffffff;
      }
    }
  }

  .rightbox {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 31px;

    .left {
      width: 178px;
      height: 178px;
      display: flex;
      align-items: center;
      background-image: url("../../../assets/icon7.png");
      background-size: 100% 100%;

      .box {
        width: 178px;
        height: 178px;
        position: relative;

        img {
          width: 85px;
          height: 86px;
          position: absolute;
          left: calc(50% - 42.5px);
          top: calc(50% - 43px);
        }

        #echarts {
          width: 200px;
          height: 200px;
          position: absolute;
          left: -11px;
          top: -11px;
        }
      }
    }

    .right {
      width: 100%;
      margin-left: 40px;

      .item {
        width: 100%;
        height: 30px;
        background-image: url("../../../assets/icon11.png");
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 7px 0;
        box-sizing: border-box;
        padding: 0 0 0 10px;

        .i-left {
          display: flex;
          align-items: center;

          .ik1 {
            width: 8px;
            height: 8px;
            background: #1799fd;
          }

          .ik2 {
            width: 8px;
            height: 8px;
            background: #5ddef6;
          }

          .ik3 {
            width: 8px;
            height: 8px;
            background: #fd7735;
          }

          .ik4 {
            width: 8px;
            height: 8px;
            background: #d0deef;
          }

          span {
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 12.88px;
            color: #ffffff;
            margin-left: 11px;
          }
        }

        .i-right {
          font-family: AlimamaShuHeiTi-Bold;
          font-weight: 700;
          font-size: 12.88px;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
